import React, { FC } from 'react'
import { Form, Input, Checkbox, Space, Button } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import { nanoid } from 'nanoid'
import { QuestionCheckboxPropsType, QuestionCheckboxDefaultProps, OptionsType } from './interface'
const PropsComponent: FC<QuestionCheckboxPropsType> = (props: QuestionCheckboxPropsType) => {
  const { title, isVertical, onChange, list, disabled } = {
    ...QuestionCheckboxDefaultProps,
    ...props,
  }
  const [form] = Form.useForm()
  function handleValuesChange() {
    if (!onChange) return
    const newValues=form.getFieldsValue() as QuestionCheckboxPropsType
    const {list=[]}=newValues
    list.forEach(opt=>{
      if(opt.value) return 
      opt.value=nanoid(5)
    })
    onChange(newValues)
  }
  return (
    <Form
      layout="vertical"
      form={form}
      initialValues={{ title, isVertical, list }}
      disabled={disabled}
      onValuesChange={handleValuesChange}
    >
      <Form.Item label="标题" name={'title'} rules={[{ required: true, message: '请输入标题' }]}>
        <Input></Input>
      </Form.Item>
      <Form.Item label="选项">
        <Form.List name={'list'}>
          {/* 遍历所有的选项（可删除） */}
          {(fields, { add, remove }) => (
            <>
              {fields.map((item, index) => {
                const { key, name } = item
                return (
                  <Space key={key} align="baseline">
                    {/* 当前选项是否被选中 */}
                    <Form.Item name={[name, 'checked']} valuePropName="checked">
                      <Checkbox />
                    </Form.Item>
                    {/* 当前选项输入框 */}
                    <Form.Item
                      name={[name, 'text']}
                      rules={[
                        { required: true, message: '请输入选项文字' },
                        {
                          validator: (_, text) => {
                            const { list = [] } = form.getFieldsValue()
                            let num = 0
                            list.forEach((opt: OptionsType) => {
                              if (opt.text === text) num++ //记录text相同的个数，预期只有一个（他自己）
                            })
                            if (num == 1) return Promise.resolve()
                            return Promise.reject(new Error('和其他选项重复了'))
                          },
                        },
                      ]}
                    >
                      <Input placeholder="请输入选项文字"></Input>
                    </Form.Item>
                    {/* 当前选项删除按钮 */}
                    {index > 0 && <MinusCircleOutlined onClick={() => remove(name)} />}
                  </Space>
                )
              })}
              {/* 添加选项 */}
              <Form.Item>
                <Button
                  block
                  type="link"
                  icon={<PlusOutlined />}
                  onClick={() => add({ text: '', value: '' })}
                >
                  添加选项
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form.Item>
      <Form.Item name={'isVertical'} valuePropName="checked">
        <Checkbox>竖向排列</Checkbox>
      </Form.Item>
    </Form>
  )
}

export default PropsComponent
